<template>
  <div class="avatarDialog">
    <el-dialog v-model="props.showAvatarDialog" title="编辑头像" center>
      <el-row :gutter="10" justify="center">
        <el-col :span="6" v-for="(item, index) in avatars" :key="index">
          <div
            class="img"
            @click="
              index === currentIndex
                ? (currentIndex = null)
                : (currentIndex = index)
            "
          >
            <div class="cover" v-if="index === currentIndex">
              <img src="../../assets/icons/right.png" alt="" />
            </div>
            <img :src="item.url" alt="" />
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel" style="border-radius: 0"
            >取消</el-button
          >
          <el-button
            type="primary"
            style="border-radius: 0"
            @click="handleConfirm"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
const emits = defineEmits(["sendSaveAndClose", "sendCloseDialog"]);
const props = defineProps({
  showAvatarDialog: {
    type: Boolean,
    required: true,
  },
});
let currentIndex = ref(null);
// 发送关闭dialog页面事件
const handleCancel = () => {
  emits("sendCloseDialog");
};

const handleConfirm = () => {
  if (currentIndex.value === null) {
    ElMessage({
      message: "请先选择头像！",
      type: "success",
      center: true,
    });
    return;
  }
  emits("sendSaveAndClose", currentIndex.value);
};

const avatars = [
  {
    url: require("../../assets/avatar/1.jpg"),
  },
  {
    url: require("../../assets/avatar/2.jpg"),
  },
  {
    url: require("../../assets/avatar/3.jpg"),
  },
  {
    url: require("../../assets/avatar/4.jpg"),
  },
  {
    url: require("../../assets/avatar/5.jpg"),
  },
  {
    url: require("../../assets/avatar/6.jpg"),
  },
  {
    url: require("../../assets/avatar/7.jpg"),
  },
  {
    url: require("../../assets/avatar/8.jpg"),
  },
];
</script>

<style scoped lang="less">
.avatarDialog {
  .img {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    &:hover {
      box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.5);
    }
    img {
      width: 100%;
      height: 100%;
    }
    .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
